<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script language="JavaScript" src="../../static/js/jquery-1.11.1.min.js"></script>
  <style>
    *{margin: 0;padding: 0}
    ullunbo{list-style: none}
    .boxdiv ul li{display: block;float: left;width: 180px;height: 130px;margin-right: -1px;background-size: cover;background-position: center center;}
    .boxdiv{height: 300px;width:3010px;}
    #box1,#box2{float: left}
    .wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}
    .boxdiv{position: absolute;left: 0;}
  </style>
  <script>
    $(function () {
      var timer='';//设置一个定时器
      var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/
      $('#box2').append($box1);//将复制的元素插入到#box2中
      var $left=parseInt($('.boxdiv').css('left'));//获取.box的left值
      alert($left)
      var scroll=function(){
        $left-=2;//设置滚动速度为2
        $('.boxdiv').css('left',$left+'px');//left赋值
        if($left<-1500){//当box值小于-1500px时，重置.box left值为0；
          $('.boxdiv').css('left','0');
          $left=0;
        }
        timer =setTimeout(scroll,30);
      }
      setTimeout(scroll,100);
      $('.wrap').hover(function(){
        clearTimeout(timer);
      },function(){
        setTimeout(scroll,100);
      });
    })

    </script>
</head>
<body>
<div class="wrap">
  <div class="boxdiv">
    <ul id="box1" class="ullunbo">
      <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
      <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
      <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
      <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
      <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
    </ul>
    <ul id="box2"></ul>
  </div>
</div>
</body>
</html>
